<template>
    <!-- 新增/编辑用户 -->
    <el-drawer
        v-model="userParams.visible"
        :title="dialogTitle"
        @open="handleOpen"
        size="800"
        :close-on-click-modal="true"
    >
        <!-- {{ formData }} -->
        <div class="drawer-main" v-loading="loading">
            <div class="topFrom">
                <div class="titel">编辑信息</div>
                <el-form ref="ruleFormRef" :model="formData" label-width="100">
                    <el-row gutter="12">
                        <!-- 任务 -->
                        <el-col :span="12">
                            <el-form-item label="任务名" prop="scheduleName">
                                <el-input
                                    v-model="formData.scheduleName"
                                    maxlength="60"
                                    placeholder="请输入任务名"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="12">
                        <el-col :span="12">
                            <el-form-item label="生效日期" prop="dateList">
                                <el-date-picker
                                    v-model="formData.dateList"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="validDateChange"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--                  执行方式-->
                    <el-row gutter="22">
                        <el-col :span="22">
                            <el-form-item label="执行方式" prop="executeType">
                                <el-radio-group
                                    v-model="formData.executeType"
                                    @change="ChangeBeanType"
                                >
                                    <el-radio :label="1">bean</el-radio>
                                    <el-radio :label="2">url</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="22" v-if="formData.executeType === 1">
                            <el-form-item label="bean" prop="executeBean">
                                <el-input v-model="formData.executeBean" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="22" v-if="formData.executeType === 2">
                            <el-form-item label="url" prop="executeUrl">
                                <el-input v-model="formData.executeUrl" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="12">
                        <el-col :span="12">
                            <el-form-item label="表达式" prop="cronInput">
                                <el-input v-model="formData.cronInput" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="22">
                        <el-col :span="22">
                            <el-form-item label="执行时间" prop="cronType">
                                <el-radio-group
                                    v-model="formData.cronType"
                                    @change="executionChange"
                                >
                                    <el-radio label="WEEK">每周</el-radio>
                                    <el-radio label="MONTH">每月指定</el-radio>
                                    <el-radio label="MONTH_LAST"
                                        >每月最后1天
                                    </el-radio>
                                    <el-radio label="MONTH_WEEK"
                                        >每月星期
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="22">
                            <el-form-item prop="checkList">
                                <div
                                    class=""
                                    v-if="
                                        formData.cronType == 'WEEK' ||
                                        formData.cronType == 'MONTH' ||
                                        formData.cronType == 'MONTH_WEEK'
                                    "
                                >
                                    <el-checkbox-group
                                        v-model="formData.checkList"
                                        class="flex flex-wrap"
                                        @change="checkListChange"
                                    >
                                        <div
                                            class="mr-qttn"
                                            v-for="(item, index) in checkList"
                                            :key="index"
                                        >
                                            {{ item.label }}
                                            <el-checkbox :label="item.value"
                                                >{{ item.label }}
                                            </el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="22">
                        <el-col :span="22">
                            <el-form-item>
                                <el-time-select
                                    v-model="formData.cronTimeValue"
                                    :picker-options="{
                                        start: '00:00',
                                        step: '00:15',
                                        end: '24:00'
                                    }"
                                    placeholder="选择时间"
                                ></el-time-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row gutter="22">
                        <el-col :span="22">
                            <el-form-item label="备注" prop="scheduleRemark">
                                <el-input
                                    v-model="formData.scheduleRemark"
                                    placeholder="输入备注信息"
                                    type="textarea"
                                    :rows="4"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--                  告警人-->
<!--                    <el-row gutter="12">-->
<!--                        <el-col :span="12">-->
<!--                            <el-form-item label="告警人" prop="noticeMember">-->
<!--                                <el-input v-model="formData.noticeMember" />-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
                    <el-row gutter="22">
                        <el-col :span="22">
                            <el-form-item label="状态" prop="state">
                                <el-radio-group v-model="formData.state">
                                    <el-radio :label="1">启用</el-radio>
                                    <el-radio :label="0">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="emit('close')">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { postEditTask } from './api'

const props = defineProps({
    userParams: {
        type: Object,
        default: () => {},
        required: true
    }
})
const formData = reactive({
    id: '',
    scheduleCode: '',
    dateList: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
    cronType: 'WEEK',
    cronTimeValue: null,
    state: 1,
    cronInput: '',
    executeBean: '',
    executeType: 1,
    executeUrl: '',
    // noticeMember: '',
    scheduleRemark: '',
    cronValue: '',
    scheduleName: null,
    validStartDate: moment().format('YYYY-MM-DD'),
    validEndDate: moment().format('YYYY-MM-DD'),
    checkList: []
})
let checkList = reactive([
    { label: '一', value: '1' },
    { label: '二', value: '2' },
    { label: '三', value: '3' },
    { label: '四', value: '4' },
    { label: '五', value: '5' },
    { label: '六', value: '6' },
    { label: '日', value: '7' }
])
const list = reactive([
    { label: '一', value: '1' },
    { label: '二', value: '2' },
    { label: '三', value: '3' },
    { label: '四', value: '4' },
    { label: '五', value: '5' },
    { label: '六', value: '6' },
    { label: '日', value: '7' }
])
const ChangeBeanType = (e) => {
    if (e === 1) {
        formData.executeUrl = ''
        return
    }
    formData.executeBean = ''
}
const checkListChange = (e) => {
    formData.cronValue = formData.checkList.join(',')
}
const executionChange = (e) => {
    formData.checkList = []
    formData.cronValue = []

    let monthList = []
    for (let index = 1; index <= 31; index++) {
        monthList.push({ label: index, value: index })
    }
    if (e == 'WEEK' || e == 'MONTH_WEEK') {
        checkList = list
    } else if (e == 'MONTH') {
        checkList = monthList
    } else {
        formData.cronValue = null
    }
}
const validDateChange = (e) => {
    formData.validStartDate = moment(e[0]).format('YYYY-MM-DD')
    formData.validEndDate = moment(e[1]).format('YYYY-MM-DD')
    formData.dateList = [formData.validStartDate, formData.validEndDate]
}
const emit = defineEmits(['close'])

const loading = ref(false)
const dialogTitle = '编辑'

const handleSubmit = () => {
    handleSave()
}
const ruleFormRef = ref(null)
const handleSave = async () => {
    try {
        loading.value = true
        const res = await postEditTask(formData)
        if (res?.code === 200) {
            ElMessage.success('编辑成功')
            emit('close', true)
        }
    } catch (error) {
        console.error('Request error:', error)
    }
    loading.value = false
}

// 初始化弹窗
const selectedValues = ref([])
const handleOpen = () => {
    nextTick(() => {
        ruleFormRef.value.resetFields()
        let row = props.userParams.row
        let monthList = []
        for (let index = 1; index <= 31; index++) {
            monthList.push({ label: index, value: JSON.stringify(index) })
        }
        checkList =
            row.cronType == 'WEEK' || row.cronType == 'MONTH_WEEK'
                ? list
                : monthList
        // 编辑
        formData.id = row.id
        formData.scheduleCode = row.scheduleCode
        formData.scheduleName = row.scheduleName
        formData.dateList = [row.validStartDate, row.validEndDate]
        formData.executeType = row.executeType
        formData.executeBean = row.executeBean
        formData.executeUrl = row.executeUrl
        formData.cronInput = row.cronInput
        formData.cronType = row.cronType
        formData.cronValue = row.cronValue
        formData.cronTimeValue = row.cronTimeValue
        formData.scheduleRemark = row.scheduleRemark
        // formData.noticeMember = row.noticeMember
        formData.state = Number(row.state)
        formData.checkList = row.cronValue.split(',')
        // 检查是否只有一个值，且没有逗号
        if (
            formData.checkList.length === 1 &&
            formData.checkList[0] === row.cronValue
        ) {
            throw new Error('字符串中没有逗号分隔的多个值')
        }
        console.log(formData)
        console.log('初始化')
    })
}
</script>

<style lang="less" scoped>
.titel {
    width: 100%;
    height: 60px;
    padding: 0 10px;
    line-height: 60px;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

.titel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 5px;
    border-radius: 10px;
    background-color: #1943ff;
}

.titleFrom {
    width: 100%;
}

.tablePadding {
    padding: 0 20px;
}

.leftTable {
    width: 45%;
    height: 550px;
    float: left;

    .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        color: #0a0a0a;
        font-weight: 600;
        border: 1px solid #eee;
    }
}

.contentTabale {
    width: 10%;
    height: 480px;
    float: left;

    .top {
        width: 100%;
        height: 150px;
        position: relative;

        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: 10px;
        }
    }
}

.rightTable {
    width: 45%;
    height: 480px;
    float: right;

    .title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        font-size: 14px;
        color: #0a0a0a;
        font-weight: 600;
        border: 1px solid #eee;
    }
}
</style>
